$(document).ready(function(){
	function DataBinder(object_id){
		let pubSub = $({});
		let data_attr = `bind-${object_id}`,
			msg = `${object_id}:change`
			// [data-bind-1]
		$(document).on('change', $(`[data-${data_attr}]`), function(evt){
			console.log('view change')
			const input = $(evt.target);
			// 1:change, [data-bind:1=到的值, 'boom']
			pubSub.trigger(msg, [input.data(data_attr), input.val()])
		})
		pubSub.on(msg, (evt, prop_name, new_val) => {
			console.log('进入view trigger')
			$(`[data-${data_attr} = ${prop_name}]`).each(function(){
				let bound = $(this);
				if(bound.is('input','textarea','select')) {
					bound.val(new_val);
				}
				else bound.html(new_val);
			})
		})
		return pubSub;
	}

	function User(uid) {
		let binder = DataBinder(uid),
			user = {
				attributes: {},
				set: function(attr_name, val){
					this.attributes[attr_name] = val;
					binder.trigger(`${uid}:change`, [attr_name, val, this]);
				},
				get: function(attr_name, val){
					return this.attributes[attr_name];
				},
				_binder: binder
			}
		binder.on(`${uid}:change`, (evt, attr_name, new_val, initiator) => {
			console.log('进入数据trigger')
			// user.attributes[attr_name] = new_val;
			if(initiator !== user){
			    user.set(attr_name,new_val);
			}
		})
		return user;
	}

	var user = new User(123);
	user.set('name', 'boom');
	var user2 = new User(123)
	user2.set('sex', 'female')

	$('#test').on('click', function(){
		console.log(user.attributes)}
	)
})
